<template>
  <el-dialog
    title="成绩详情"
    v-model="dialogVisible"
    width="800px"
    :before-close="handleClose"
    class="score-detail-dialog">

    <div v-if="score" class="score-detail-content">
      <!-- 基本信息 -->
      <el-card class="info-card" shadow="hover">
        <template #header>
          <div class="card-header">
            <span class="header-title">
              <i class="el-icon-info"></i> 基本信息
            </span>
          </div>
        </template>

        <el-row :gutter="20">
          <el-col :span="12">
            <div class="info-item">
              <label>项目名称：</label>
              <span class="info-value">{{ score.project?.name || '-' }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <label>项目类型：</label>
              <span class="info-value">{{ score.project?.type || '-' }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <label>比赛轮次：</label>
              <el-tag :type="getRoundTagType(score.round)" size="small">
                {{ getRoundText(score.round) }}
              </el-tag>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <label>比赛时间：</label>
              <span class="info-value">{{ formatDateTime(score.matchTime) }}</span>
            </div>
          </el-col>
        </el-row>
      </el-card>

      <!-- 学生信息 -->
      <el-card class="info-card" shadow="hover">
        <template #header>
          <div class="card-header">
            <span class="header-title">
              <i class="el-icon-user"></i> 学生信息
            </span>
          </div>
        </template>

        <el-row :gutter="20">
          <el-col :span="12">
            <div class="info-item">
              <label>学生姓名：</label>
              <span class="info-value">{{ score.student?.realName || '-' }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <label>学号：</label>
              <span class="info-value">{{ score.student?.studentNumber || '-' }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <label>学院：</label>
              <span class="info-value">{{ score.student?.department || '-' }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <label>班级：</label>
              <span class="info-value">{{ score.student?.className || '-' }}</span>
            </div>
          </el-col>
        </el-row>
      </el-card>

      <!-- 成绩信息 -->
      <el-card class="info-card" shadow="hover">
        <template #header>
          <div class="card-header">
            <span class="header-title">
              <i class="el-icon-trophy"></i> 成绩信息
            </span>
          </div>
        </template>

        <div class="score-info">
          <div class="score-main">
            <div class="score-value" :class="getScoreClass(score)">
              {{ formatScore(score.scoreValue) }} {{ score.unit }}
            </div>
            <div v-if="score.ranking" class="ranking-display">
              <span class="ranking-label">排名：</span>
              <div class="ranking-badge" :class="getRankingClass(score.ranking)">
                {{ score.ranking }}
              </div>
            </div>
          </div>

          <el-row :gutter="20" class="score-details">
            <el-col :span="8">
              <div class="detail-item">
                <label>成绩状态：</label>
                <el-tag :type="getStatusTagType(score.status)" size="small">
                  {{ score.status }}
                </el-tag>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="detail-item">
                <label>记录人：</label>
                <span class="info-value">{{ score.recorder?.realName || '-' }}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="detail-item">
                <label>录入时间：</label>
                <span class="info-value">{{ formatDateTime(score.createdAt) }}</span>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-card>

      <!-- 历史记录 -->
      <el-card class="info-card" shadow="hover">
        <template #header>
          <div class="card-header">
            <span class="header-title">
              <i class="el-icon-time"></i> 历史记录
            </span>
          </div>
        </template>

        <el-timeline>
          <el-timeline-item
            v-for="(record, index) in historyRecords"
            :key="index"
            :timestamp="formatDateTime(record.timestamp)"
            :type="getTimelineType(record.type)">
            <div class="timeline-content">
              <div class="timeline-title">{{ record.title }}</div>
              <div class="timeline-desc">{{ record.description }}</div>
              <div v-if="record.operator" class="timeline-operator">操作人：{{ record.operator }}</div>
            </div>
          </el-timeline-item>
        </el-timeline>
      </el-card>

      <!-- 备注信息 -->
      <el-card class="info-card" shadow="hover">
        <template #header>
          <div class="card-header">
            <span class="header-title">
              <i class="el-icon-document"></i> 备注信息
            </span>
          </div>
        </template>

        <div class="remark-content">
          <p v-if="score.remark">{{ score.remark }}</p>
          <p v-else class="no-remark">暂无备注信息</p>
        </div>
      </el-card>

      <!-- 异议信息（如果有） -->
      <el-card v-if="score.status === '有异议'" class="info-card dispute-card" shadow="hover">
        <template #header>
          <div class="card-header">
            <span class="header-title">
              <i class="el-icon-warning"></i> 异议信息
            </span>
          </div>
        </template>

        <div class="dispute-content">
          <el-alert
            title="成绩异议"
            type="warning"
            :closable="false"
            show-icon>
            <template #default>
              <div class="dispute-details">
                <p><strong>异议人：</strong>{{ disputeInfo?.disputer || '-' }}</p>
                <p><strong>异议时间：</strong>{{ formatDateTime(disputeInfo?.disputeTime) }}</p>
                <p><strong>异议原因：</strong>{{ disputeInfo?.reason || '-' }}</p>
                <p><strong>处理状态：</strong>
                  <el-tag :type="disputeInfo?.resolved ? 'success' : 'warning'" size="small">
                    {{ disputeInfo?.resolved ? '已处理' : '待处理' }}
                  </el-tag>
                </p>
              </div>
            </template>
          </el-alert>
        </div>
      </el-card>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">关闭</el-button>
        <el-button v-if="score && score.status === '待审核'" type="warning" @click="handleApprove">
          审核通过
        </el-button>
        <el-button v-if="score && score.status === '待审核'" type="danger" @click="handleReject">
          驳回
        </el-button>
        <el-button v-if="score && score.status === '已驳回'" type="primary" @click="handlePublish">
          公示成绩
        </el-button>
        <el-button type="success" @click="handleViewRanking">
          查看排名
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
export default {
  name: 'ScoreDetailDialog',
  props: {
    modelValue: {
      type: Boolean,
      default: false
    },
    score: {
      type: Object,
      default: null
    }
  },
  emits: ['update:modelValue', 'close', 'approve', 'reject', 'publish', 'view-ranking'],
  data() {
    return {
      // 模拟历史记录数据
      historyRecords: [],
      // 模拟异议信息
      disputeInfo: null
    }
  },
  computed: {
    dialogVisible: {
      get() {
        return this.modelValue
      },
      set(value) {
        this.$emit('update:modelValue', value)
      }
    }
  },
  watch: {
    score: {
      handler(newVal) {
        if (newVal) {
          this.loadHistoryRecords()
          this.loadDisputeInfo()
        }
      },
      immediate: true
    }
  },
  methods: {
    // 加载历史记录
    loadHistoryRecords() {
      if (!this.score) return

      // 模拟历史记录
      this.historyRecords = [
        {
          timestamp: this.score.createdAt,
          type: 'primary',
          title: '成绩录入',
          description: `由 ${this.score.recorder?.realName || '系统'} 录入成绩 ${this.formatScore(this.score.scoreValue)} ${this.score.unit}`,
          operator: this.score.recorder?.realName
        }
      ]

      // 根据状态添加历史记录
      if (this.score.status === '已公示') {
        this.historyRecords.push({
          timestamp: this.score.updatedAt || this.score.createdAt,
          type: 'success',
          title: '成绩公示',
          description: '成绩已审核通过并公示',
          operator: this.score.auditor?.realName || '系统'
        })
      } else if (this.score.status === '已驳回') {
        this.historyRecords.push({
          timestamp: this.score.updatedAt || this.score.createdAt,
          type: 'danger',
          title: '成绩驳回',
          description: '成绩审核未通过',
          operator: this.score.auditor?.realName || '系统'
        })
      }
    },

    // 加载异议信息
    loadDisputeInfo() {
      if (this.score?.status === '有异议') {
        // 模拟异议信息
        this.disputeInfo = {
          disputer: '张三',
          disputeTime: '2023-10-15 14:30:00',
          reason: '认为成绩记录有误，实际成绩应该更好',
          resolved: false
        }
      } else {
        this.disputeInfo = null
      }
    },

    // 关闭对话框
    handleClose() {
      this.$emit('close')
    },

    // 审核通过
    handleApprove() {
      this.$emit('approve', this.score)
    },

    // 驳回
    handleReject() {
      this.$emit('reject', this.score)
    },

    // 公示
    handlePublish() {
      this.$emit('publish', this.score)
    },

    // 查看排名
    handleViewRanking() {
      this.$emit('view-ranking', this.score)
    },

    // 获取轮次标签类型
    getRoundTagType(round) {
      if (round === 4) return 'danger'
      if (round === 3) return 'warning'
      if (round === 2) return 'primary'
      return 'info'
    },

    // 获取轮次文本
    getRoundText(round) {
      if (round === 4) return '决赛'
      if (round === 3) return '半决赛'
      if (round === 2) return '预赛'
      return `第${round}轮`
    },

    // 获取状态标签类型
    getStatusTagType(status) {
      const statusMap = {
        '待审核': 'warning',
        '已公示': 'success',
        '已驳回': 'danger',
        '有异议': 'info'
      }
      return statusMap[status] || 'info'
    },

    // 获取排名样式类
    getRankingClass(ranking) {
      if (ranking === 1) return 'gold'
      if (ranking === 2) return 'silver'
      if (ranking === 3) return 'bronze'
      return 'normal'
    },

    // 获取成绩样式类
    getScoreClass(score) {
      if (score.ranking === 1) return 'gold-score'
      if (score.ranking === 2) return 'silver-score'
      if (score.ranking === 3) return 'bronze-score'
      return ''
    },

    // 获取时间轴类型
    getTimelineType(type) {
      const typeMap = {
        'primary': 'primary',
        'success': 'success',
        'danger': 'danger',
        'warning': 'warning'
      }
      return typeMap[type] || 'primary'
    },

    // 格式化成绩
    formatScore(value) {
      if (value === null || value === undefined) return '-'
      return typeof value === 'number' ? value.toFixed(2) : value
    },

    // 格式化日期时间
    formatDateTime(dateTime) {
      if (!dateTime) return '-'
      return new Date(dateTime).toLocaleString('zh-CN')
    }
  }
}
</script>

<style scoped>
.score-detail-dialog {
  border-radius: 8px;
}

.score-detail-content {
  max-height: 600px;
  overflow-y: auto;
}

.info-card {
  margin-bottom: 16px;
}

.info-card:last-child {
  margin-bottom: 0;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-title {
  font-weight: 500;
  font-size: 16px;
  color: #303133;
}

.info-item {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.info-item:last-child {
  margin-bottom: 0;
}

.info-item label {
  min-width: 80px;
  color: #606266;
  font-weight: 500;
}

.info-value {
  color: #303133;
  font-weight: 500;
}

.score-info {
  text-align: center;
}

.score-main {
  margin-bottom: 20px;
}

.score-value {
  font-size: 36px;
  font-weight: bold;
  color: #409eff;
  margin-bottom: 12px;
  display: inline-block;
}

.gold-score {
  color: #ffd700;
  text-shadow: 0 2px 4px rgba(255, 215, 0, 0.3);
}

.silver-score {
  color: #c0c0c0;
  text-shadow: 0 2px 4px rgba(192, 192, 192, 0.3);
}

.bronze-score {
  color: #cd7f32;
  text-shadow: 0 2px 4px rgba(205, 127, 50, 0.3);
}

.ranking-display {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.ranking-label {
  color: #606266;
  font-weight: 500;
}

.ranking-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-weight: bold;
  font-size: 16px;
  color: white;
}

.ranking-badge.gold {
  background: linear-gradient(135deg, #ffd700, #ffed4e);
  color: #8b7500;
  box-shadow: 0 4px 8px rgba(255, 215, 0, 0.4);
}

.ranking-badge.silver {
  background: linear-gradient(135deg, #c0c0c0, #e8e8e8);
  color: #666;
  box-shadow: 0 4px 8px rgba(192, 192, 192, 0.4);
}

.ranking-badge.bronze {
  background: linear-gradient(135deg, #cd7f32, #daa520);
  color: white;
  box-shadow: 0 4px 8px rgba(205, 127, 50, 0.4);
}

.ranking-badge.normal {
  background-color: #909399;
  color: white;
}

.score-details {
  text-align: left;
}

.detail-item {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.detail-item label {
  min-width: 80px;
  color: #606266;
  font-weight: 500;
}

.timeline-content {
  padding-left: 8px;
}

.timeline-title {
  font-weight: 500;
  color: #303133;
  margin-bottom: 4px;
}

.timeline-desc {
  color: #606266;
  font-size: 14px;
  margin-bottom: 4px;
}

.timeline-operator {
  color: #909399;
  font-size: 12px;
}

.remark-content {
  padding: 12px;
  background-color: #f8f9fa;
  border-radius: 4px;
  min-height: 60px;
}

.remark-content p {
  margin: 0;
  color: #303133;
  line-height: 1.6;
}

.no-remark {
  color: #909399;
  font-style: italic;
  text-align: center;
}

.dispute-card {
  border-left: 4px solid #e6a23c;
}

.dispute-content {
  padding: 12px;
}

.dispute-details p {
  margin: 8px 0;
  line-height: 1.6;
}

.dialog-footer {
  text-align: right;
  padding-top: 16px;
  border-top: 1px solid #e4e7ed;
}

.dialog-footer .el-button {
  margin-left: 12px;
}

.dialog-footer .el-button:first-child {
  margin-left: 0;
}

/* 滚动条样式 */
.score-detail-content::-webkit-scrollbar {
  width: 6px;
}

.score-detail-content::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.score-detail-content::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.score-detail-content::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .score-value {
    font-size: 28px;
  }

  .ranking-badge {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }

  .info-item label {
    min-width: 60px;
    font-size: 14px;
  }

  .info-value {
    font-size: 14px;
  }
}
</style>